<template>
   <div>
     <el-card class="box-card">
       <div class="text item">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="题目类型" prop="topicType">
             <el-select v-model="form.topicType" placeholder="请选择题目类型">
               <el-option
                 v-for="dict in dict.type.exam_question_type"
                 :key="dict.value"
                 :label="dict.label"
                 :value="parseInt(dict.value)"
               ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="题目难度" prop="topicDifficulty">
             <el-input v-model="form.topicDifficulty" placeholder="请输入题目难度" />
           </el-form-item>
           <el-form-item label="题目内容">
             <editor v-model="form.topicContent" :min-height="192"/>
           </el-form-item>
           <el-form-item label="试题图片" prop="topicPhotos">
             <el-upload
               class="upload-demo"
               action="https://jsonplaceholder.typicode.com/posts/"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :file-list="fileList"
               list-type="picture">
               <el-button size="small" type="primary">点击上传</el-button>
               <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
             </el-upload>
           </el-form-item>
           <el-form-item label="试题解析" prop="topicAnalyze">
             <el-input v-model="form.topicAnalyze" type="textarea" placeholder="请输入内容" />
           </el-form-item>
         </el-form>

       </div>
     </el-card>

     <el-button @click="addQuestionResult" style="margin-top: 30px" type="primary" plain>添加</el-button>


     <el-table
       :data="tableData"
       height="250"
       border
       style="width: 100%;margin-top: 20px">
       <el-table-column
         prop="isAnswer"
         label="是否答案"
         width="180">
         <template slot-scope="scope">
           <el-checkbox v-model="scope.row.isAnswer">答案</el-checkbox>
         </template>

       </el-table-column>
       <el-table-column
         prop="resultPhotos"
         label="选项图片"
         width="180">
         <template slot-scope="scope">
           <el-upload
             class="avatar-uploader"
             action="https://jsonplaceholder.typicode.com/posts/"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload">
             <el-button size="small" type="primary">点击上传</el-button>
             <img v-if="imageUrl" :src="imageUrl" class="avatar">
           </el-upload>
         </template>

       </el-table-column>
       <el-table-column
         prop="resultContent"
         label="答案内容">
         <template slot-scope="scope">
           <el-input v-model="scope.row.resultContent" type="textarea" placeholder="请输入内容" />
         </template>

       </el-table-column>
       <el-table-column
         prop="resultAnalyze"
         label="答案解析">
         <template slot-scope="scope">
           <el-input v-model="scope.row.resultAnalyze" type="textarea" placeholder="请输入内容" />
         </template>
       </el-table-column>

       <el-table-column
         label="操作">
         <template slot-scope="scope">
           <el-button  @click="handleClick(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
         </template>
       </el-table-column>
     </el-table>

     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
   </div>
</template>

<script>
import {addQuestions, updateQuestions} from "@/api/exam/questions";

export default {
  name: "AddQuestion",
  dicts: ['exam_question_type'],
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      tableData: [],
      imageUrl: ''

    }
  },
  methods:{
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    addQuestionResult(){
       this.tableData.push({});
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateQuestions(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addQuestions(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
